<template>
  <a-card :bordered="false">
    <template>
      <div class="table-operator">
        <a-button
          type="primary"
          icon="plus"
          v-action:temp:typesave
          @click="handleAdd({id:'0',name:'一级目录'})"
        >新建模板分类</a-button>
      </div>
    </template>

    <div class="table-page-search-wrapper">
      <a-table :columns="columns" :dataSource="data" size="small" bordered>
        <!-- :rowSelection="rowSelection" -->
        <span slot="action" slot-scope="text, record">
          <template>
            <a-tag color="orange" @click="handleEdit(record)" v-action:temp:typeedit>编辑</a-tag>
            <a-tag color="red" @click="handleDelete(record)"  v-action:temp:typedel>删除</a-tag>
            <a-tag v-if="record.parentId==='0'" color="green" @click="handleAdd(record)" v-action:temp:typesave>新增</a-tag>
          </template>
        </span>
      </a-table>
      <form-handle ref="formHandle" @ok="handleOk" />

    </div>
  </a-card>
</template>

<script>
import { page, delByPk } from '@/api/site/templateType'
import formHandle from './handle'
import moment from 'moment'
// import formHandleOrg from './handleOrg'

const columns = [
  {
    title: '分类名称',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '分类编码',
    dataIndex: 'attributes.code',
    key: 'code'
  },
  {
    title: '创建时间',
    dataIndex: 'attributes.gmtCreate',
    width: '16%',
    sorter: true,
    needTotal: false,
    customRender: text => {
      if (text) return moment(text).format('YYYY-MM-DD')
    }
  },
  {
    title: '操作',
    dataIndex: '',
    key: 'x',
    scopedSlots: { customRender: 'action' }
  }
]

const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(
      `selectedRowKeys: ${selectedRowKeys}`,
      'selectedRows: ',
      selectedRows
    )
  },
  onSelect: (record, selected, selectedRows) => {
    console.log(record, selected, selectedRows)
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    console.log(selected, selectedRows, changeRows)
  }
}
export default {
  data () {
    return {
      data: [],
      columns,
      rowSelection
    }
  },
  components: {
    formHandle
  },
  created () {
    this.loadData()
  },
  methods: {
    loadData () {
      return page({}).then(response => {
        const result = response.res
        if (result.id === '-1') {
           this.data = result.children
        } else {
           const menuArr = [result]
           this.data = menuArr
        }
      })
    },
    handleAdd (record) {
      this.$refs.formHandle.add(record.id, record.name)
    },
    handleEdit (record) {
      this.$refs.formHandle.edit(record)
    },
    handleAssign (record) {
      this.$refs.formHandleOrg.assignColumn(record)
    },
    handleDelete (record) {
      const that = this
      this.$confirm({
        title: '操作提醒',
        content: '确定要删除吗?',
        onOk () {
          delByPk({ id: record.id }).then(response => {
            if (response.code === 0) {
              that.$message.info(response.msg)
              that.handleOk()
            } else {
              that.$message.error(response.msg)
            }
          })
        },
        onCancel () {}
      })
    },
    handleOk () {
      this.loadData()
    }
  }
}
</script>
